<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>caipu2</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.css">
	<script type="">

		var httpurl="http://127.0.0.1:8080"

		
		window.onload = function(){
			var zhuce= document.getElementById('zhuce')
			var denglu = document.getElementById('denglu')
			var tanchu = document.querySelectorAll(".tanchu")[0]
			var tanchu2 = document.querySelectorAll(".tanchu2")[0]
			var tijiao = document.querySelectorAll(".tijiao")[0]
			var cannel = document.querySelectorAll(".cannel")[0]
			var sure = document.querySelectorAll(".sure")[0]
			var cannel2 = document.querySelectorAll(".cannel2")[0]
			zhuce.onclick= function(){
				tanchu.style.display = "block"
			}
			denglu.onclick = function(){
				tanchu2.style.display = "block"
			}
			tijiao.onclick = function(){
				tanchu.style.display = "none"
			}
			cannel.onclick = function(){
				tanchu.style.display = "none"
			}
			sure.onclick = function(){
				tanchu2.style.display = "none"
			}
			cannel2.onclick = function(){
				tanchu2.style.display = "none"
			}
		}
	</script>
	<style type="">
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		a{text-decoration: none;}
		body{
			font-size: 14px;
			background-color: #ddd;
			line-height: normal;
		}
		.top{
			background-color: #f26e2c;
		}
		ul{margin-bottom: 0;}
		p{margin-bottom: 0;}
		.content{
			width: 1000px;
			margin: 0 auto;
		}
		.list >img{
			display: block;
			height: 50px;
			width: 240px;
			margin-right: 60px;
			float: left;
		}
		.title{
			float: left;
			width: 700px;
		}
		.title li{
			float: left;
		}
		.title li a{
			display: block;
			text-decoration: none;
			padding: 16px 15px;
			font-weight: bold;
			color: #fff;
			transition: all .5s;
		}
		.title li a:hover{
			color: #f26e2c;
			background-color: #fff;
		}
		.title .caipu2 a{
			color: #f26e2c;
			background-color: #fff;
		}
		.person{
			position: relative;
		}
		.person-1{
			width: 86px;
			top: 50px;
			right: 0;
			background-color: #f26e2c;
			position: absolute;
			display: none;
			z-index: 10;
		}
		.person-1 li a{
			padding: 15px 15px;
		}
		.person:hover .person-1{
			display: block;
		}
		.about{
			position: relative;
		}
		.about-1{
			position: absolute;
			background-color: #f26e2c;
			top: 50px;
			display: none;
			z-index: 10;
		}
		.about:hover .about-1{
			display: block;
		}
		.about-1 li a{
			padding: 15px 15px;
		}
		.list{
			position: relative;
			cursor: pointer;
		}
		#zhuce{
			padding: 16px 15px;
			font-weight: bold;
			color: #fff;
		}
		#denglu{
			padding: 16px 15px;
			font-weight: bold;
			color: #fff;
			cursor: pointer;
		}
		.tanchu{
			padding: 10px;
			width: 240px;
			background-color: #fff;
			border-radius: 5px;
			position: absolute;
			top: 50px;
			right: 26%;
			display: none;
			z-index: 10;
		}
		.tanchu2{
			padding: 10px;
			width: 240px;
			background-color: #fff;
			border-radius: 5px;
			position: absolute;
			top: 50px;
			right: 20%;
			display: none;
			z-index: 10;
		}
		.list2{
			margin-top: 10px;
		}
		.list2-1{
			display: block;
			overflow: hidden;
		}
		.list2-1 li{
			float: left;
			text-decoration: none;
			padding: 15px 15px;
			color:#fff;
			font-weight: bold;
			background-color: #f26e2c;
		}
		.list2-1 li{
			cursor: pointer;
		}
		.list2-1 .focus{
			color: #f26e2c;
			background-color:#fff;
		}
		.imglist{
			margin-top: 10px;
			clear: both;
		}
		.imglist li{
			overflow: hidden;
			float: left;
			width: 172px;
			height: 188px;
			margin-right: 35px;
			border:1px solid #ddd;
			transition: all .5s;
		}
		.imglist li img{
			width: 170px;
			height: 130px;
			transition: all .5s;
		}
		.imglist li:hover{
			border:1px solid #f26e2c;
		}
		.imglist li:hover img{
			transform: scale(1.02);
		}
		.imglist p{
			text-align: center;
			margin: 18px 0;
		}
		.imglist .noright{
			margin-right:0;
		}
	</style>
</head>
<body>
	<div class="top">
		<div class="list content">
			<img src="images/logo3.png">
			<ul class="title">
				<li><a href="http://127.0.0.1:8080">网站首页</a></li>
				<li class="caipu2"><a href="caipu2.html">美食菜谱</a></li>
				<li class="person">
					<a href="">个人中心</a>
					<!-- <ul class="person-1">
						<li><a href="huati.html">发布话题</a></li>
						<li><a href="caipu.html">发布菜谱</a></li>
						<li><a href="zhanghu.html">账户设置</a></li>
					</ul> -->
				</li>
				<li class="about">
					<a href="">关于我们</a>
					<ul class="about-1">
						<li><a href="">联系我们</a></li>
						<li><a href="">用户反馈</a></li>
					</ul>
				</li>
				<!-- <li id="zhuce">注册</li>
				<li id="denglu">登录</li> -->
			</ul>
		</div>
		<div style="clear:both"></div>
		<!-- <div class="tanchu">
			<form>
			  <div class="form-group">
			    <label for="exampleInputEmail1">账号</label>
			    <input type="text" class="form-control" id="exampleInputEmail1">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">密码</label>
			    <input type="password" class="form-control" id="exampleInputPassword1">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">确认密码</label>
			    <input type="password" class="form-control" id="exampleInputPassword1">
			  </div>
			</form>
			<button type="button" class="btn btn-success tijiao">提交</button>
			<button type="button" class="btn btn-warning cannel">取消</button>
		</div>
		<div class="tanchu2">
			<form>
			  <div class="form-group">
			    <label for="exampleInputEmail1">账号</label>
			    <input type="text" class="form-control" id="exampleInputEmail1">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">密码</label>
			    <input type="password" class="form-control" id="exampleInputPassword1">
			  </div>
			</form>
			<button type="button" class="btn btn-success sure">登录</button>
			<button type="button" class="btn btn-warning cannel2">取消</button>
		</div> -->
	</div>
	<div class="list2 content">
		<div class="list2-1">
			<ul>
				<li class="focus">美食推荐</li>
			</ul>
		</div>
		<div class="imglist">
			<ul>
				<li>
					<img src="images/jiamo.jpg">
					<p>羊肉荚膜</p>
				</li>
				<li>
					<img src="images/youpo.jpg">
					<p>油泼面</p>
				</li>
				<li>
					<img src="images/saozi.jpg">
					<p>臊子面</p>
				</li>
				<li>
					<img src="images/jingao.jpg">
					<p>蜂蜜凉糕</p>
				</li>
				<li class="noright">
					<img src="images/liangpi.jpg">
					<p>陕西凉皮</p>
				</li>
			</ul>
		</div>
	</div>
	<script type="">
		person = document.querySelectorAll(".person")[0]
		person.onclick = function(){
			alert("请前往首页登录！")
		}
	</script>
</body>
</html>